<script setup>
import titleVue from '../common/titleVue.vue'
import codemirrorEditor from './codemirrorEditor.vue'
defineOptions({
  name: 'codeEditorIndex'
})
</script>

<template>
  <main class="codeEditor">
    <titleVue :content="'代码编辑区'"></titleVue>
    <div class="container">
      <buttonList class="buttonList"></buttonList>
      <section class="content">
       <codemirrorEditor></codemirrorEditor>
      </section>
      <outPut></outPut>
    </div>
  </main>
</template>

<style lang="less" scoped>
@black-color: #282c34;
.codeEditor {
  padding-top: 5px;
  margin-left: 10px;
  width: 100%;
  position: relative;
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100vh - 50px);
    background-color: lighten(@black-color, 5%);
    .content {
      position: relative;
      width: 95%;
      height: 95%;
      background-color: skyblue;
      overflow: auto;
    }
  }
}
</style>
